.scrollbar(@width: 10px, @height: 10px) {
	// @scrollbar-bg-color:rgba (255,255,255,0);
	// @scrollbar-color: green;
	// &::-webkit-scrollbar {
	// 	width: @width;
	// 	height: @height;
	// 	background-color: @scrollbar-bg-color;
	// 	border-radius: 100px;
	// }

	// &::-webkit-scrollbar-thumb {
	// 	background-color: fade(@scrollbar-color, 20%);
	// 	border-radius: 100px;
	// }

	// &::-webkit-scrollbar-corner {
	// 	background: none;
	// }

	// &:hover {
	// 	// width: @scrollbar-width;
	// 	// &::-webkit-scrollbar {
	// 	//     width: @scrollbar-width;
	// 	// }
	// 	&::-webkit-scrollbar-thumb {
	// 		background-color: fade(@scrollbar-color, 30%);
	// 	}
	// }
}
// body{
//     .scrollbar()
// }
// .scrollbar
// @scrollbar-bg-color:blue;
// @scrollbar-color: green;
&::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	background-color: rgba(255,255,255,0);
	border-radius: 100px;
}

&::-webkit-scrollbar-thumb {
	// background-color: rgba(0,0,0,.4);
	background-color: hsla(var(--bc)/.4);
	border-radius: 100px;
}

&::-webkit-scrollbar-corner {
	background: none;
}

&:hover {
	// width: @scrollbar-width;
	// &::-webkit-scrollbar {
	//     width: @scrollbar-width;
	// }
	&::-webkit-scrollbar-thumb {
		background-color: hsla(var(--bc)/.6);
	}
}
